<template>
    <div>
        <el-dialog
            v-model="dialogVisible"
            title="符号选择器"
            class="style-symbol-picker-dialog"
            width="400px"
            draggable
        >
            <el-form ref="symbolFormRef" :model="currentRule.symbolizers[0]" label-width="90px">
                <el-form-item
                    label="图层类型"
                    :rules="{
                        required: true,
                        message: '类型不能为空',
                        trigger: 'blur',
                    }"
                >
                    <el-select v-model="currentRule.symbolizers[0]!.kind" placeholder="Select" size="small">
                        <el-option
                            v-for="geometricItem in geometricTypes"
                            :key="geometricItem.value"
                            :label="geometricItem.label"
                            :value="geometricItem.value"
                        />
                    </el-select>
                </el-form-item>
                <!-- 点符号 -->
                <template v-if="currentRule.symbolizers[0]!.kind == 'Mark'">
                    <markStyle
                        ref="mark"
                        :geoSymbolizer="(currentRule.symbolizers[0] as GeoMarkSymbolizer)"
                        @update-inner-style="updateInnerStyle"
                    ></markStyle>
                </template>
                <!-- 线 -->
                <template v-if="currentRule.symbolizers[0]!.kind == 'Line'">
                    <line-style
                        ref="line"
                        :geoSymbolizer="(currentRule.symbolizers[0] as GeoLineSymbolizer)"
                        @update-inner-style="updateInnerStyle"
                    ></line-style>
                </template>

                <!-- 面 -->
                <template v-if="currentRule.symbolizers[0]!.kind == 'Fill'">
                    <fill-style
                        ref="fill"
                        :geoSymbolizer="(currentRule.symbolizers[0] as GeoFillSymbolizer)"
                        @update-inner-style="updateInnerStyle"
                    ></fill-style>
                </template>
                <!-- 栅格 -->
                <template v-if="currentRule.symbolizers[0]!.kind == 'Raster'">
                    <raster-style
                        :geoSymbolizer="(currentRule.symbolizers[0] as GeoRasterSymbolizer)"
                        @update-inner-style="updateInnerStyle"
                    ></raster-style>
                </template>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addOrUpdate">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeMount } from 'vue'
import type { FormInstance } from 'element-plus'
import SLDParser from 'geostyler-sld-parser'
import type {
  Rule as GeoRule,
  Symbolizer as GeoSymbolizer,
  MarkSymbolizer as GeoMarkSymbolizer,
  IconSymbolizer as GeoIconSymbolizer,
  LineSymbolizer as GeoLineSymbolizer,
  FillSymbolizer as GeoFillSymbolizer,
  RasterSymbolizer as GeoRasterSymbolizer,
} from 'geostyler-style'
import fillStyle from './kind/fillStyle.vue'
import markStyle from './kind/markStyle.vue'
import lineStyle from './kind/lineStyle.vue'
import rasterStyle from './kind/rasterStyle.vue'

// 弹窗显隐
const dialogVisible = ref(false)
const currentRule = reactive<GeoRule>({
    name: '',
    symbolizers: [
        {
            kind: 'Fill', // 规则类型
            color: '#ff0000',
            fillOpacity: 1,
            outlineColor: '',
            outlineWidth: 0,
            outlineOpacity: 1,
            outlineDasharray: [],
        },
    ],
    filter: undefined,
})
// 表单ref
const symbolFormRef = ref<FormInstance>()
const parser = new SLDParser()

/**
 * 更新类型样式
 */
const updateInnerStyle = (val: GeoSymbolizer) => {
    currentRule.symbolizers[0] = val
}

const geometricTypes = ref([
    {
        value: 'Mark',
        label: '点符号',
    },
    {
        value: 'Line',
        label: '线',
    },
    {
        value: 'Fill',
        label: '面',
    },
    {
        value: 'Raster',
        label: '栅格',
    },
])

// openDialog
const openDialog = () => {
    dialogVisible.value = true
}

/**
 * @description: 设置原始编辑数据
 * @param {*} orignEditDataParam
 * @return {*}
 */
const setOrignEditData = (orignEditDataParam: GeoRule) => {
    const tempGeoRule = JSON.parse(JSON.stringify(orignEditDataParam))
    currentRule.name = tempGeoRule.name
    currentRule.scaleDenominator = tempGeoRule.scaleDenominator
    currentRule.symbolizers = tempGeoRule.symbolizers
    currentRule.filter = tempGeoRule.filter
}
const closeDialog = () => {
    dialogVisible.value = false
}
interface updateRuleSymbolizersEmit {
    (e: 'updateRuleSymbolizers', currentRule: GeoRule): void
}

const emit = defineEmits<updateRuleSymbolizersEmit>()
const addOrUpdate = () => {
    symbolFormRef.value?.validate((valid, fields) => {
        if (valid) {
            emit('updateRuleSymbolizers', currentRule as GeoRule)
        }
    })
    closeDialog()
}

onBeforeMount(() => {})
defineExpose({ openDialog, closeDialog, setOrignEditData })
</script>
<style lang="scss">
.style-symbol-picker-dialog {
  .el-dialog__body {
    padding: 20px;
  }
  .el-dialog__footer {
    padding: 20px;
    text-align: center;
  }
}
</style>
